import { defineComponent } from 'vue';
import { getAchieve } from "@/api/home"
import SheltV2 from '../../common/SheltV2';
import "./index.less";
import { ElProgress } from 'element-plus';
import ItemTable from './ItemTable';


export default defineComponent({
    name: 'Performance',
    setup() {

        const itemTableRef = ref();
        const data = ref({}) as AnyObject;

        getAchieve({ page: 1, pagesize: 9999 }).then(res => {
            console.log("vvvvv", res);
            data.value = res.data.personal;
        })
        const viewDetail = () => {
            itemTableRef.value.dialogVisible = true;
        }

        return () => (

            <SheltV2 title='我的业绩' more="查看详情" onViewDetail={viewDetail} question="<div><p>【该数据每日凌晨更新一次】</p><p>我的业绩数据来源于BI，展示与本人相关的月度、季度、年度的销售收入、销售目标、销售达成率。</p></div>">
                <div class="performance flex-between">
                    <ElProgress color="#5179e9" stroke-width={25} width={200} stroke-linecap="square" type="circle" percentage={parseFloat(data.value?.month_rate || 0)} v-slots={{
                        default: ({ percentage }: AnyObject) => <div class="circle_content">
                            <p class="num">{percentage}%</p>
                            <p class="list_2">达成率</p>
                        </div>
                    }} />
                    <div class="content">
                        <p class="list_1">月度达成(万元)</p>
                        <p class="num">{data.value?.month_finish}</p>
                        <p class="list_2">月度目标 <span>{data.value?.month_target}</span></p>
                        <p class="list_2">达成率 <span>{data.value?.month_rate}</span></p>
                    </div>
                </div>
                <ItemTable ref={itemTableRef} is_team={0} />
            </SheltV2>
        );
    }
});
